<!--
 ______________
< EDLad.com >
 --------------
        \   ^__^
         \  (**)\__$__$__
            (__)\       )\/\
             U  ||------|
                ||     ||
-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>React Router 4 - WEB API | ED少年 - 王文宏的博客</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <meta name="keywords" content="ED少年,ED,CSS,CSS3,SASS,Javascript,jQuery,Linux,Ubuntu,NodeJS,MongoDB,Mac">
  <meta name="description" content="这是 Eded 的个人博客，他的精神在这里驻扎生根，未成年人请在监护人陪同下游览。ED 是一名经验丰富的 CSSer，写博客的目的主要是记录工作中遇到的问题。">
  <link rel="stylesheet" href="/css/main.css">
</head>

<body >
  <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-nature" viewBox="0 0 32 32">
<title>nature</title>
<path class="path1" d="M18.667 9.333c0-1.467-1.2-2.667-2.667-2.667s-2.667 1.2-2.667 2.667 1.2 2.667 2.667 2.667 2.667-1.2 2.667-2.667zM14.667 9.333c0-0.8 0.533-1.333 1.333-1.333s1.333 0.533 1.333 1.333-0.533 1.333-1.333 1.333-1.333-0.533-1.333-1.333z"></path>
<path class="path2" d="M17.333 22.267v-4c0.8-0.4 1.333-1.333 1.333-2.267v-0.267l0.133 0.133c1.067 1.067 2.667 1.067 3.733 0s1.067-2.667 0-3.733l-0.133-0.133h0.267c1.467 0 2.667-1.2 2.667-2.667s-1.2-2.667-2.667-2.667h-0.267l0.133-0.133c1.067-1.067 1.067-2.667 0-3.733s-2.667-1.067-3.733 0l-0.133 0.133v-0.267c0-1.467-1.2-2.667-2.667-2.667s-2.667 1.2-2.667 2.667v0.267l-0.133-0.133c-1.067-1.067-2.667-1.067-3.733 0s-1.067 2.667 0 3.733l0.133 0.133h-0.267c-1.467 0-2.667 1.2-2.667 2.667s1.2 2.667 2.667 2.667h0.267l-0.267 0.133c-1.067 1.067-1.067 2.667 0 3.733s2.667 1.067 3.733 0l0.133-0.133v0.267c0 0.933 0.533 1.867 1.333 2.267v4c-1.333-2.133-3.733-3.6-6.533-3.6h-1.333v5.333c0 4.4 3.6 8 8 8h2.667c4.4 0 8-3.6 8-8v-5.333h-1.333c-2.8 0-5.2 1.467-6.667 3.6zM13.333 13.867l-1.067 1.067c-0.533 0.533-1.333 0.533-1.867 0s-0.533-1.333 0-1.867l1.067-1.067c-0.267-0.4-0.533-0.8-0.667-1.333h-1.467c-0.8 0-1.333-0.533-1.333-1.333s0.533-1.333 1.333-1.333h1.467c0.133-0.533 0.267-0.933 0.533-1.333l-0.933-1.067c-0.533-0.533-0.533-1.333 0-1.867s1.333-0.533 1.867 0l1.067 1.067c0.4-0.267 0.933-0.4 1.333-0.533v-1.6c0-0.8 0.533-1.333 1.333-1.333s1.333 0.533 1.333 1.333v1.467c0.533 0.133 0.933 0.267 1.333 0.533l1.067-1.067c0.533-0.533 1.333-0.533 1.867 0s0.533 1.333 0 1.867l-1.067 1.2c0.267 0.4 0.4 0.933 0.533 1.333h1.6c0.8 0 1.333 0.533 1.333 1.333s-0.533 1.333-1.333 1.333h-1.467c-0.133 0.533-0.267 0.933-0.533 1.333l1.067 1.067c0.533 0.533 0.533 1.333 0 1.867s-1.333 0.533-1.867 0l-1.2-1.067c-0.4 0.267-0.933 0.4-1.333 0.533v1.6c0 0.8-0.533 1.333-1.333 1.333s-1.333-0.533-1.333-1.333v-1.467c-0.533-0.133-0.933-0.4-1.333-0.667zM14.667 30.667c-3.733 0-6.667-2.933-6.667-6.667v-4c3.733 0 6.667 2.933 6.667 6.667v4zM24 24c0 3.733-2.933 6.667-6.667 6.667v-4c0-3.733 2.933-6.667 6.667-6.667v4z"></path>
</symbol>
<symbol id="icon-book" viewBox="0 0 32 32">
<title>book</title>
<path class="path1" d="M31.434 8.421h-0.029c-0.548 0.004-0.633-0.473-0.642-0.694v-3.457c0-0.369-0.299-0.668-0.667-0.668h-9.883c-2.48 0-3.404 0.919-3.634 1.208l-0.063 0.088-0 0.002-0.195 0.268c-0 0-0 0-0 0-0.262 0.361-0.491 0.207-0.601 0.089l-0.374-0.466-0.185-0.223c-0.311-0.327-1.121-0.964-2.728-0.964h-10.528c-0.369 0-0.668 0.299-0.668 0.668v3.413c0 0.598-0.325 0.717-0.523 0.738h-0.148c-0.162 0.010-0.539 0.104-0.539 0.797v16.265c0 0.399 0.324 0.722 0.723 0.722h9.609c3.066 0 4.402 1.156 4.802 1.599l0.229 0.283h0.001c0 0 0.613 0.694 1.259 0v0l0.134-0.157v0l0.002-0.002 0.171-0.2c0.005-0.006 0.046-0.052 0.105-0.113 0.512-0.497 1.79-1.412 4.29-1.412h9.902c0.399 0 0.723-0.323 0.723-0.722v-16.422c0-0.588-0.425-0.637-0.54-0.64zM29.276 22.931c0 0.32-0.267 0.579-0.601 0.579h-8.148c-2.899 0-3.952 1.31-3.952 1.31l-0.134 0.179-0.063 0.087c-0 0-0 0-0 0-0.276 0.375-0.683 0.003-0.685 0.001l-0.188-0.235c-0.139-0.167-1.204-1.343-3.781-1.343h-8.4c-0.332 0-0.599-0.259-0.599-0.579v-17.331c0-0.32 0.268-0.579 0.599-0.579h6.521c4.851 0 5.31 2.756 5.342 3.556v12.053c0 0.876 0.418 1.041 0.653 1.064h0.35c0.24-0.024 0.622-0.166 0.622-0.85v-12.423h-0.004c0.036-1.002 0.427-3.401 3.345-3.401h8.521c0.333 0 0.601 0.259 0.601 0.579v17.332z"></path>
</symbol>
<symbol id="icon-bug" viewBox="0 0 32 32">
<title>bug</title>
<path class="path1" d="M16-0.092c-2.867 0-5.24 2.115-5.641 4.874h11.281c-0.401-2.759-2.773-4.874-5.641-4.874z"></path>
<path class="path2" d="M11.77 6.253h-3.669l-2.261-3.785c-0.241-0.403-0.668-0.629-1.106-0.629-0.225 0-0.452 0.059-0.659 0.183-0.61 0.365-0.809 1.157-0.445 1.768l3.010 5.038h2.001c-2.093 1.789-3.562 4.314-3.943 7.172h-2.859c-0.508 0-0.92 0.412-0.92 0.92v0.552c0 0.508 0.412 0.92 0.92 0.92h2.8c0.209 2.531 1.27 4.826 2.874 6.621h-0.872l-3.010 5.036c-0.365 0.61-0.166 1.401 0.444 1.766 0.207 0.124 0.435 0.182 0.659 0.182 0.438 0 0.865-0.224 1.106-0.627l2.261-3.783h2.715c1.31 0.685 2.754 1.123 4.265 1.247v-22.58h-3.31z"></path>
<path class="path3" d="M30.161 16h-2.855c-0.367-2.859-1.79-5.384-3.869-7.172h2.003l3.013-4.883c0.374-0.605 0.186-1.399-0.419-1.773s-1.398-0.184-1.772 0.421l-2.258 3.66h-7.084v22.58c1.559-0.124 3.027-0.562 4.344-1.247h2.74l2.258 3.658c0.373 0.605 1.166 0.793 1.772 0.419s0.793-1.167 0.419-1.772l-3.012-4.88h-0.885c1.583-1.794 2.607-4.090 2.809-6.621h2.798c0.508 0 0.92-0.412 0.92-0.92v-0.552c0-0.508-0.412-0.92-0.92-0.92z"></path>
</symbol>
<symbol id="icon-burger" viewBox="0 0 32 32">
<title>burger</title>
<path class="path1" d="M22.667 5.333h-13.333c-5.2 0-9.333 4.133-9.333 9.333v13.333c0 2.267 1.733 4 4 4h24c2.267 0 4-1.733 4-4v-13.333c0-5.2-4.133-9.333-9.333-9.333zM2.667 17.333h11.733l2.667 2.667h-14.4v-2.667zM16.4 17.333h9.6l-4.8 4.8-4.8-4.8zM29.333 28c0 0.8-0.533 1.333-1.333 1.333h-24c-0.8 0-1.333-0.533-1.333-1.333v-1.333h26.667v1.333zM29.333 25.333h-26.667v-2.667h17.067l1.333 1.333 1.333-1.333h6.933v2.667zM29.333 20h-4.133l2.667-2.667h1.467v2.667zM29.333 16h-26.667v-1.333c0-3.733 2.933-6.667 6.667-6.667h13.333c3.733 0 6.667 2.933 6.667 6.667v1.333z"></path>
<path class="path2" d="M22.667 12c0 0.736-0.597 1.333-1.333 1.333s-1.333-0.597-1.333-1.333c0-0.736 0.597-1.333 1.333-1.333s1.333 0.597 1.333 1.333z"></path>
<path class="path3" d="M16 10.667c0 0.736-0.597 1.333-1.333 1.333s-1.333-0.597-1.333-1.333c0-0.736 0.597-1.333 1.333-1.333s1.333 0.597 1.333 1.333z"></path>
<path class="path4" d="M10.667 12c0 0.736-0.597 1.333-1.333 1.333s-1.333-0.597-1.333-1.333c0-0.736 0.597-1.333 1.333-1.333s1.333 0.597 1.333 1.333z"></path>
</symbol>
<symbol id="icon-costumes" viewBox="0 0 32 32">
<title>costumes</title>
<path class="path1" d="M32.014 9.44c-0.085-5.66-4.878-5.369-4.878-5.369-0.368 0.006-4.321 0.165-4.344 3.888-0.002 0.018 0 0.039-0.002 0.057v0.011c-0.003 0.181 0.002 0.413 0.012 0.669l-0.003 0.002v1.52c-0.002 0.011-0.006 0.019-0.009 0.030-0.002 0.209-0.005 0.406-0.005 0.59h-0c0 0 0.009 0.98-0.523 1.407-0.067 0.044-0.133 0.091-0.208 0.123-0.027 0.011-0.058 0.018-0.087 0.026-0.113 0.036-0.23 0.063-0.354 0.063-0.656 0-1.187-0.531-1.187-1.186 0-0.019 0.006-0.034 0.006-0.052 0-0.007-0.002-0.010-0.002-0.018v-1.817h-0.002v-0.001c0-0.392-0.32-0.71-0.71-0.71-0.393 0-0.711 0.319-0.711 0.71v2.060c0 1.746 1.59 2.316 1.909 2.412 0.267 0.047 0.55 0.079 0.86 0.079 1.505-0.037 2.163-1.235 2.427-1.976 0.003-0.006 0.006-0.013 0.009-0.021 0.007-0.021 0.015-0.056 0.024-0.082 0.018-0.053 0.033-0.104 0.047-0.149 0.006-0.024 0.013-0.045 0.020-0.071 0.041-0.155 0.056-0.252 0.056-0.252l-0.002-0.001c0.063-0.318 0.114-0.725 0.119-1.26v-1.224c0-0.145 0.011-0.273 0.019-0.402-0.005-0.062-0.019-0.119-0.019-0.181 0-1.502 1.219-2.72 2.72-2.72 1.482 0 2.68 1.184 2.715 2.656h0.006v0.052c0 0.004 0.002 0.008 0.002 0.012s-0.002 0.008-0.002 0.012v1.973c0.002 0.030 0.009 0.058 0.009 0.088h0.006v0.11c0 0.024 0.005 0.049 0.005 0.075 0 0.013-0.005 0.025-0.005 0.039v4.626c0 1.102-0.78 1.090-1.1 1.041-0.849-0.177-1.574-0.448-1.574-0.448l0.012 0.021c-0.892-0.302-1.862-0.482-2.886-0.482-1.47 0-2.832 0.351-3.996 0.943l-0.005-0.009c0 0-0.032 0.020-0.082 0.052-0.235 0.125-0.46 0.259-0.677 0.401-0.898 0.5-2.426 1.23-3.688 1.236-1.864-0.030-3.816-1.41-3.816-1.41v0.011c-1.263-0.764-2.816-1.224-4.505-1.224-0.872 0-1.704 0.132-2.484 0.354v-0.013c0 0-1.327 0.418-2.582 0.615-0.679 0.127-0.77-0.403-0.779-0.633v-4.471c0-0.011-0.004-0.023-0.004-0.034 0-0.021 0.003-0.043 0.004-0.064v-0.094h0.004c0.002-0.025 0.006-0.050 0.008-0.074v-1.693c0-0.005-0-0.007-0-0.011 0-0.003 0-0.008 0-0.011v-0.044h0.004c0.030-1.264 1.058-2.279 2.329-2.279 1.29 0 2.333 1.044 2.333 2.333 0 0.053-0.011 0.102-0.015 0.155 0.007 0.111 0.015 0.222 0.015 0.345v1.052c0.003 0.459 0.048 0.809 0.103 1.081l-0.003 0.001c0 0 0.014 0.084 0.050 0.217 0.006 0.022 0.011 0.040 0.018 0.061 0.011 0.040 0.026 0.082 0.040 0.129 0.007 0.021 0.015 0.050 0.021 0.069 0.003 0.005 0.005 0.013 0.008 0.019 0.227 0.636 0.792 1.662 2.082 1.694 0.265 0 0.508-0.027 0.737-0.068 0.274-0.084 1.639-0.572 1.639-2.070v-1.768h-0.030c0.002-0.020 0.011-0.037 0.011-0.058 0-0.332-0.27-0.601-0.601-0.601s-0.601 0.27-0.601 0.601c0 0.021 0.009 0.039 0.011 0.058h-0.011v1.559c0 0.006-0.002 0.009-0.002 0.014 0.001 0.015 0.005 0.029 0.005 0.044 0 0.562-0.456 1.018-1.018 1.018-0.107 0-0.208-0.024-0.304-0.055-0.024-0.008-0.050-0.013-0.073-0.023-0.065-0.026-0.121-0.066-0.179-0.105-0.457-0.365-0.449-1.206-0.449-1.206v0c-0.002-0.158-0.003-0.328-0.005-0.507-0.002-0.009-0.006-0.017-0.008-0.025v-1.303l-0.002-0.002c0.008-0.22 0.013-0.418 0.010-0.574v-0.010c0-0.016 0-0.034-0-0.049-0.019-3.194-3.41-3.33-3.727-3.336 0 0-4.113-0.25-4.186 4.605h-0.006v10.927c0 1.249 0.245 2.115 0.459 2.64 1.063 2.418 3.873 4.148 7.178 4.148 3.138 0 5.825-1.558 6.999-3.784l0.002 0.002c0 0 0.009-0.017 0.016-0.033 0.009-0.017 0.018-0.033 0.026-0.050 0.126-0.244 0.557-0.982 1.214-0.982h0.127c0.717-0.002 1.153 0.633 1.325 0.943 0.020 0.044 0.042 0.084 0.064 0.125 0.012 0.026 0.020 0.044 0.020 0.044l0.003-0.003c1.186 2.201 3.857 3.739 6.974 3.739 2.975 0 5.549-1.399 6.809-3.44 0.203-0.343 0.827-1.5 0.827-2.839v-12.213h-0.007zM3.893 20.543c3.903-4.526 8.595 0.228 8.595 0.228-3.155 4.172-7.348 1.931-8.595-0.228zM19.512 20.771c0 0 4.692-4.754 8.595-0.228-1.247 2.159-5.44 4.401-8.596 0.228z"></path>
</symbol>
<symbol id="icon-doctors" viewBox="0 0 32 32">
<title>doctors</title>
<path class="path1" d="M27.619 1.778c-3.345-2.733-8.274-2.237-11.009 1.109l-13.339 16.326c-2.734 3.345-2.239 8.276 1.108 11.009s8.276 2.239 11.011-1.108l13.339-16.327c2.734-3.346 2.238-8.275-1.109-11.009zM15.948 24.547l-1.46 1.787c-1.973 2.416-5.585 2.727-8.069 0.698-0.154-0.126-0.297-0.259-0.435-0.397-0.266-0.328 0.17-0.402 0.17-0.402l0.005-0.010c1.541 0.206 5.622 0.434 9.412-2.104l0.006 0.015c0 0 0.207-0.090 0.307 0 0.1 0.091 0.17 0.284 0.065 0.413zM27.121 12.066l-2.286 2.799c-0.043 0.056-0.080 0.115-0.125 0.171l-2.852 3.492-9.377-7.397 5.403-6.611c2.084-2.551 5.843-2.929 8.393-0.845 2.552 2.084 2.929 5.842 0.845 8.393z"></path>
</symbol>
<symbol id="icon-hospital" viewBox="0 0 32 32">
<title>hospital</title>
<path class="path1" d="M30.667 10.667h-5.333v-9.333c0-0.8-0.933-1.333-1.6-1.333h-16c-0.8 0-1.067 0.533-1.067 1.333v9.333h-5.333c-0.8 0-1.333 0.533-1.333 1.333v20h32v-20c0-0.8-0.533-1.333-1.333-1.333zM18.667 29.333h-5.333v-5.333h5.333v5.333zM29.333 29.333h-9.333v-6.667h-8v6.667h-9.333v-16h6.667v-10.667h13.333v10.667h6.667v16z"></path>
<path class="path2" d="M17.333 17.333h2.667v2.667h-2.667v-2.667z"></path>
<path class="path3" d="M12 17.333h2.667v2.667h-2.667v-2.667z"></path>
<path class="path4" d="M6.667 17.333h2.667v2.667h-2.667v-2.667z"></path>
<path class="path5" d="M22.667 17.333h2.667v2.667h-2.667v-2.667z"></path>
<path class="path6" d="M22.667 22.667h2.667v2.667h-2.667v-2.667z"></path>
<path class="path7" d="M6.667 22.667h2.667v2.667h-2.667v-2.667z"></path>
<path class="path8" d="M17.333 5.333h-2.667v2.667h-2.667v2.667h2.667v2.667h2.667v-2.667h2.667v-2.667h-2.667z"></path>
</symbol>
<symbol id="icon-office" viewBox="0 0 32 32">
<title>office</title>
<path class="path1" d="M30.533 1.333h-6.533c0-0.8-0.533-1.333-1.333-1.333s-1.333 0.533-1.333 1.333h-10.667c0-0.8-0.533-1.333-1.333-1.333s-1.333 0.533-1.333 1.333h-6.533c-0.8 0-1.467 0.667-1.467 1.467v27.733c0 0.8 0.667 1.467 1.467 1.467h29.067c0.8 0 1.467-0.667 1.467-1.467v-27.733c0-0.8-0.667-1.467-1.467-1.467zM29.333 29.333h-26.667v-18.667h26.667v18.667zM29.333 9.333h-26.667v-5.333h5.333v1.333c0 0.8 0.533 1.333 1.333 1.333s1.333-0.533 1.333-1.333v-1.333h10.667v1.333c0 0.8 0.533 1.333 1.333 1.333s1.333-0.533 1.333-1.333v-1.333h5.333v5.333z"></path>
<path class="path2" d="M10.667 13.333h-5.333v5.333h5.333v-5.333zM9.333 17.333h-2.667v-2.667h2.667v2.667z"></path>
<path class="path3" d="M18.667 13.333h-5.333v5.333h5.333v-5.333zM17.333 17.333h-2.667v-2.667h2.667v2.667z"></path>
<path class="path4" d="M26.667 13.333h-5.333v5.333h5.333v-5.333zM25.333 17.333h-2.667v-2.667h2.667v2.667z"></path>
<path class="path5" d="M10.667 21.333h-5.333v5.333h5.333v-5.333zM9.333 25.333h-2.667v-2.667h2.667v2.667z"></path>
<path class="path6" d="M18.667 21.333h-5.333v5.333h5.333v-5.333zM17.333 25.333h-2.667v-2.667h2.667v2.667z"></path>
<path class="path7" d="M26.667 21.333h-5.333v5.333h5.333v-5.333zM25.333 25.333h-2.667v-2.667h2.667v2.667z"></path>
</symbol>
<symbol id="icon-shoes" viewBox="0 0 32 32">
<title>shoes</title>
<path class="path1" d="M29.268 2.693c-0.019-0.015-0.965-0.704-1.677 0.205-2.277 2.922-9.84 12.538-13.504 15.942-3.2 2.974-6.011 1.279-7.274 0.182v0.003c0 0-0.647-0.672-2.127-0.21-0.003 0.001-0.003 0.001-0.007 0.001-0.601 0.198-1.417 0.45-2.518 0.77-1.561 0.451-2.046 1.626-2.098 2.75 0.029 0.372 0.214 2.064 1.159 3.191 1.722 1.763 5.088 3.589 8.656 3.971 4.122 0.438 5.13-1.273 5.13-1.273s2.514-3.401 4.87-6.859c0.002-0.003 0.005-0.005 0.007-0.009 2.034-2.928 4.439-4.399 4.491-4.431 0.139-0.061 0.273-0.119 0.401-0.166 0.261-0.078 1.669-0.409 1.786 1.508l0.599 10.236 0.003 0.132c0 0 0 0.002 0 0.004l0.006 0.186c0.024 0.273 0.148 0.745 0.725 0.746 0.54-0.011 0.611-0.613 0.616-0.858v-0.105c0.219-2.672 1.177-12.605 2.064-14.415 3.011-6.893 0.314-10.225-1.308-11.499z"></path>
</symbol>
<symbol id="icon-skull" viewBox="0 0 32 32">
<title>skull</title>
<path class="path1" d="M9.345 27.63c0 1.285 1.041 2.326 2.326 2.326h8.722c1.285 0 2.326-1.041 2.326-2.326v-0.68c0-0.546 0.378-1.006 0.889-1.128 2.791-0.43 4.925-2.844 4.925-5.751 0-1.308-0.431-2.518-1.163-3.489v-3.977c0-5.832-5.077-10.56-11.339-10.56s-11.339 4.727-11.339 10.56v3.977c-0.732 0.971-1.163 2.181-1.163 3.489 0 2.907 2.134 5.321 4.925 5.751 0.512 0.122 0.89 0.581 0.89 1.128v0.68zM8.182 16c0-1.605 1.303-2.907 2.907-2.907s2.907 1.303 2.907 2.907c0 1.605-1.303 2.907-2.907 2.907s-2.907-1.303-2.907-2.907zM18.067 16c0-1.605 1.303-2.907 2.908-2.907s2.907 1.303 2.907 2.907c0 1.605-1.303 2.907-2.907 2.907s-2.908-1.303-2.908-2.907zM13.165 22.21l2.047-2.047c0.454-0.454 1.186-0.454 1.64 0l2.047 2.047c0.442 0.442 0.442 1.157 0 1.599s-1.157 0.442-1.599 0l-1.267-1.267-1.268 1.267c-0.441 0.442-1.157 0.442-1.599 0s-0.441-1.157-0-1.599z"></path>
</symbol>
<symbol id="icon-rocket" viewBox="0 0 32 32">
<title>rocket</title>
<path class="path1" d="M16 2.908c0 0-5.037 3.908-5.037 13.508 0 6.157 1.862 10.006 4.287 10.665v-6.197c0-0.414 0.335-0.75 0.75-0.75s0.75 0.336 0.75 0.75v6.197c2.425-0.657 4.287-4.508 4.287-10.665 0-9.711-5.037-13.508-5.037-13.508zM15.941 10.316c-0.864 0-1.709-0.078-2.457-0.219 0.732-2.361 1.765-3.95 2.526-4.88 0.758 0.918 1.786 2.495 2.514 4.857-0.777 0.157-1.667 0.242-2.582 0.242z"></path>
<path class="path2" d="M9.612 20.66c-1.504 0-2.722 1.041-2.722 2.324v6.109l4.931-3.648c-0.732-1.248-1.278-2.869-1.601-4.785h-0.608z"></path>
<path class="path3" d="M22.388 20.66h-0.608c-0.323 1.916-0.869 3.537-1.601 4.785l4.931 3.648v-6.109c-0-1.284-1.219-2.324-2.723-2.324z"></path>
</symbol>
</defs>
</svg>


  <div class="container">
    
<div class="breadcrumbs">
  <svg class="icon"><use xlink:href="#icon-burger"></use></svg>
  <ul>
    <li><a href="/">首页</a></li>
    
    
    <li>React Router 4 - WEB API</li>
    
  </ul>
</div>
<!-- /.breadcrumbs -->


    <article class="article">
  
  <header>
    
  
    <h1 class="title" itemprop="name">
      React Router 4 - WEB API
    </h1>
  


  </header>

  
  <div class="meta">
    
      <a class="date" href="/2017/05/08/react-router-web-api/">
  <svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-office"></use></svg>
  <time datetime="2017-05-08T14:19:34.000Z" itemprop="datePublished">2017-05-08</time>
</a>

    
    
  <div class="category">
    <a class="category-link" href="/categories/code/">编码</a><a class="category-link" href="/categories/code/f2e/">f2e</a>
  </div>


    
  <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript/">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/react/">react</a></li></ul>


  </div>

  


  <div class="body">
  
    <p>ReactRouter4 的资料太少，结合在官网的学习，做了一份中文文档。</p>
<a id="more"></a>
<h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>本人英文很差，主要是 Google 翻译稍作修改。但由于网上缺少中文资料，故而做这份文档，方便自己学习和查阅。难免有错误的地方，欢迎批评指正。</p>
<hr>
<p>React Router 是 React 广泛使用的“路由”库，路由做的事情，可以简单理解为：<em>根据 URL 规则渲染对应的 组件</em>。<br>由于 React 和各个类库迭代频繁，所以网上资料经常过时。在本文编写的 2017年05月08日，以下内容仍是最新的 React Router 4 API。</p>
<p>备注：React Router 4 API 分为 WEB/Native/Core 三部分，以下是 <em>WEB API</em>。</p>
<h3 id="目录"><a href="#目录" class="headerlink" title="目录"></a>目录</h3><p>官网按照字母顺序罗列（适合查询使用）：</p>
<p><strong><a href="#BrowserRouter">&lt;BrowserRouter&gt;</a></strong> (浏览器路由)<br>- <a href="#BrowserRouter-basename-string">basename: string</a><br>- <a href="#BrowserRouter-getUserConfirmation-func">getUserConfirmation: func</a><br>- <a href="#BrowserRouter-forceRefresh-bool">forceRefresh: bool</a><br>- <a href="#BrowserRouter-keyLength-number">keyLength: number</a><br>- <a href="#BrowserRouter-children-node">children: node</a></p>
<p><strong><a href="#HashRouter">&lt;HashRouter&gt;</a></strong> (锚点路由)<br>- <a href="#HashRouter-basename-string">basename: string</a><br>- <a href="#HashRouter-getUserConfirmation-func">getUserConfirmation: func</a><br>- <a href="#HashRouter-hashType-string">hashType: string</a><br>- <a href="#HashRouter-children-node">children: node</a></p>
<p><strong><a href="#Link">&lt;Link&gt;</a></strong> (链接组件)<br>- <a href="#Link-to-string">to: string</a><br>- <a href="#Link-to-object">to: object</a><br>- <a href="#Link-replace-bool">replace: bool</a></p>
<p><strong><a href="#NavLink">&lt;NavLink&gt;</a></strong> (导航链接组件)<br>- <a href="#NavLink-activeClassName-string">activeClassName: string</a><br>- <a href="#NavLink-activeStyle-object">activeStyle: object</a><br>- <a href="#NavLink-exact-bool">exact: bool</a><br>- <a href="#NavLink-strict-bool">strict: bool</a><br>- <a href="#NavLink-isActive-func">isActive: func</a></p>
<p><strong><a href="#Prompt">&lt;Prompt&gt;</a></strong> (提示组件)</p>
<p><strong><a href="#MemoryRouter">&lt;MemoryRouter&gt;</a></strong> (内存路由)<br>- <a href="#MemoryRouter-initialEntries-array">initialEntries: array</a><br>- <a href="#MemoryRouter-initialIndex-number">initialIndex: number</a><br>- <a href="#MemoryRouter-getUserConfirmation-func">getUserConfirmation: func</a><br>- <a href="#MemoryRouter-keyLength-number">keyLength: number</a><br>- <a href="#MemoryRouter-children-node">children: node</a></p>
<p><strong><a href="#Redirect">&lt;Redirect&gt;</a></strong> (重定向组件)<br>- <a href="#Redirect-to-string">to: string</a><br>- <a href="#Redirect-to-object">to: object</a><br>- <a href="#Redirect-push-bool">push: bool</a><br>- <a href="#Redirect-from-string">from: string</a></p>
<p><strong><a href="#Route">&lt;Route&gt;</a></strong> (路由组件)<br>- <a href="#Route-component">component</a><br>- <a href="#Route-render-func">render: func</a><br>- <a href="#Route-children-func">children: func</a><br>- <a href="#Route-path-string">path: string</a><br>- <a href="#Route-exact-bool">exact: bool</a><br>- <a href="#Route-strict-bool">strict: bool</a></p>
<p><strong><a href="#Router">&lt;Router&gt;</a></strong> (路由器组件)<br>- <a href="#Router-history-object">history: object</a><br>- <a href="#Router-children-node">children: node</a></p>
<p><strong><a href="#StaticRouter">&lt;StaticRouter&gt;</a></strong> (静态路由组件)<br>- <a href="#StaticRouter-basename-string">basename: string</a><br>- <a href="#StaticRouter-location-string">location: string</a><br>- <a href="#StaticRouter-location-object">location: object</a><br>- <a href="#StaticRouter-context-object">context: object</a><br>- <a href="#StaticRouter-children-node">children: node</a></p>
<p><strong><a href="#Switch">&lt;Switch&gt;</a></strong> (单匹配组件)<br>- <a href="#Switch-children-node">children: node</a></p>
<h3 id="BrowserRouter"><a href="#BrowserRouter" class="headerlink" title="BrowserRouter"></a>BrowserRouter</h3><p><em>&lt;BrowserRouter&gt; (浏览器路由)</em></p>
<p>使用 HTML5 History API（pushState，replaceState 和 popstate 事件）的 <code>&lt;Router&gt;</code> 来保持 UI 与 URL 同步。</p>
<pre><code class="jsx">import { BrowserRouter } from &#39;react-router-dom&#39;

&lt;BrowserRouter
  basename={optionalString}
  forceRefresh={optionalBool}
  getUserConfirmation={optionalFunc}
  keyLength={optionalNumber}
&gt;
  &lt;App/&gt;
&lt;/BrowserRouter&gt;
</code></pre>
<p></p><h4 id="BrowserRouter-basename-string">basename: string</h4><br>所有位置的基本URL。如果您的应用程序是从服务器上的子目录提供的，则需要将其设置为子目录。正确格式化的基本名称应该有一个主要的斜杠，但没有尾部斜杠。<p></p>
<pre><code class="jsx">&lt;BrowserRouter basename=&quot;/calendar&quot;/&gt;
&lt;Link to=&quot;/today&quot;/&gt; // 渲染成 &lt;a href=&quot;/calendar/today&quot;&gt;
</code></pre>
<p></p><h4 id="BrowserRouter-getUserConfirmation-func">getUserConfirmation: func</h4><br>用于 确认导航(confirm navigation) 的功能。默认使用 window.confirm。<p></p>
<pre><code class="jsx">/*
this is the default behavior
这是默认行为
*/
const getConfirmation = (message, callback) =&gt; {
  const allowTransition = window.confirm(message)
  callback(allowTransition)
}

&lt;BrowserRouter getUserConfirmation={getConfirmation}/&gt;
</code></pre>
<p></p><h4 id="BrowserRouter-forceRefresh-bool">forceRefresh: bool</h4><br>如果为 true，则路由器将在页面导航中使用全页刷新。您可能只希望在不支持 HTML5 History API 的浏览器中使用此功能。<p></p>
<pre><code class="jsx">const supportsHistory = &#39;pushState&#39; in window.history
&lt;BrowserRouter forceRefresh={!supportsHistory}/&gt;
</code></pre>
<p></p><h4 id="BrowserRouter-keyLength-number">keyLength: number</h4><br>location.key 的长度（默认为6）<p></p>
<pre><code class="jsx">&lt;BrowserRouter keyLength={12}/&gt;
</code></pre>
<p></p><h4 id="BrowserRouter-children-node">children: node</h4><br>渲染<a href="https://facebook.github.io/react/docs/react-api.html#react.children.only" target="_blank" rel="external">简单的单个子元素</a><p></p>
<h3 id="HashRouter"><a href="#HashRouter" class="headerlink" title="HashRouter"></a>HashRouter</h3><p><em>&lt;HashRouter&gt; (锚点路由)</em></p>
<p>使用 URL 的哈希部分（即 <code>window.location.hash</code>）的 &lt;Router&gt; 来保持您的 UI 与 URL 同步。</p>
<p>重要说明：哈希历史记录不支持 <code>location.key</code> 或 <code>location.state</code>。 在以前的版本中，我们试图缓和行为，但是有一些边缘案例我们无法解决。 任何需要此行为的代码或插件将无法正常工作。 由于此技术仅用于支持旧版浏览器，因此我们建议您将服务器配置为使用 &lt;BrowserHistory&gt;。</p>
<pre><code class="jsx">import { HashRouter } from &#39;react-router-dom&#39;

&lt;HashRouter&gt;
  &lt;App/&gt;
&lt;/HashRouter&gt;
</code></pre>
<p></p><h4 id="HashRouter-basename-string">basename: string</h4><br>所有位置的基本URL。正确格式化的基本名称应该有一个主要的斜杠，但没有尾部斜杠。<p></p>
<pre><code class="jsx">&lt;HashRouter basename=&quot;/calendar&quot;/&gt;
&lt;Link to=&quot;/today&quot;/&gt; // renders &lt;a href=&quot;#/calendar/today&quot;&gt;
</code></pre>
<p></p><h4 id="HashRouter-getUserConfirmation-func">getUserConfirmation: func</h4><br>用于确认导航的功能。默认使用 window.confirm。<p></p>
<pre><code class="jsx">// this is the default behavior
// 这是默认行为
const getConfirmation = (message, callback) =&gt; {
  const allowTransition = window.confirm(message)
  callback(allowTransition)
}

&lt;HashRouter getUserConfirmation={getConfirmation}/&gt;
</code></pre>
<p></p><h4 id="HashRouter-hashType-string">hashType: string</h4><br>用于 <code>window.location.hash</code> 的编码类型。可用值为：<p></p>
<ul>
<li>“slash” - 创建像 ‘#/‘ 或是 ‘#/sunshine/lollipops’ 的哈希路径</li>
<li>“noslash” - 创建像 ‘#’ 或是 ‘#sunshine/lollipops’ 的哈希路径</li>
<li>“hashbang” - 创建 “可抓取的 ajax” （被 Google 弃用）像 ‘#!/‘ 或是 ‘#!/sunshine/lollipops’ 的哈希路径<br>默认是 “slash”.</li>
</ul>
<p></p><h4 id="HashRouter-children-node">children: node</h4><br>渲染简单的单个子元素<p></p>
<h3 id="Link"><a href="#Link" class="headerlink" title="Link"></a>Link</h3><p><em>&lt;Link&gt; (链接组件)</em></p>
<p>在应用程序周围提供声明性，可访问的导航。（其实，就是有状态的 A 标签。）</p>
<pre><code class="jsx">import { Link } from &#39;react-router-dom&#39;

&lt;Link to=&quot;/about&quot;&gt;About&lt;/Link&gt;
</code></pre>
<p></p><h4 id="Link-to-string">to: string</h4><br>链接到的路径名或路径<p></p>
<pre><code class="jsx">&lt;Link to=&quot;/courses&quot;/&gt;
</code></pre>
<p></p><h4 id="Link-to-object">to: object</h4><br>要链接的位置，接受一个 {} 描述，可带 ‘pathname/search/hash/state’<p></p>
<pre><code class="jsx">&lt;Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/&gt;
</code></pre>
<p></p><h4 id="Link-replace-bool">replace: bool</h4><br>如果为 true，单击链接将替换历史堆栈中的当前条目，而不是添加新条目<p></p>
<pre><code class="jsx">&lt;Link to=&quot;/courses&quot; replace /&gt;
</code></pre>
<h3 id="NavLink"><a href="#NavLink" class="headerlink" title="NavLink"></a>NavLink</h3><p><em>&lt;NavLink&gt; (导航链接组件)</em></p>
<p>一个特殊版本的 <code>&lt;Link&gt;</code>，当与当前 URL 匹配时，将向渲染元素添加样式属性。</p>
<pre><code class="jsx">import { NavLink } from &#39;react-router-dom&#39;

&lt;NavLink to=&quot;/about&quot;&gt;About&lt;/NavLink&gt;
</code></pre>
<p></p><h4 id="Link-activeClassName-string">activeClassName: string</h4><br>当活动时给出元素的 class。默认给定 class 是活动的。这将与 className 支持相结合<p></p>
<pre><code class="jsx">&lt;NavLink
  to=&quot;/faq&quot;
  activeClassName=&quot;selected&quot;
&gt;FAQs&lt;/NavLink&gt;
</code></pre>
<p></p><h4 id="Link-activeStyle-object">activeStyle: object</h4><br>当元素处于活动状态时应用于元素的样式<p></p>
<pre><code class="jsx">&lt;NavLink
  to=&quot;/faq&quot;
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
&gt;FAQs&lt;/NavLink&gt;
</code></pre>
<p></p><h4 id="Link-exact-bool">exact: bool</h4><br>当为 true 时，仅当位置匹配完全时才会应用 class/style<p></p>
<pre><code class="jsx">&lt;NavLink
  exact
  to=&quot;/profile&quot;
&gt;Profile&lt;/NavLink&gt;
</code></pre>
<p></p><h4 id="Link-strict-bool">strict: bool</h4><br>当为 true 时，在确定位置是否与当前网址匹配时，将考虑位置路径名上的尾部斜线。有关详细信息，请参阅 <code>&lt;Route strict&gt;</code><a href="https://reacttraining.com/core/api/Route/strict-bool" target="_blank" rel="external">文档</a><p></p>
<pre><code class="jsx">&lt;NavLink
  strict
  to=&quot;/events/&quot;
&gt;Events&lt;/NavLink&gt;
</code></pre>
<p></p><h4 id="Link-isActive-func">isActive: func</h4><br>该功能可以添加额外的逻辑，用于确定是否该链路是活动的。<p></p>
<pre><code class="jsx">// only consider an event active if its event id is an odd number
// 只有当事件ID为奇数时, 才考虑事件的激活
const oddEvent = (match, location) =&gt; {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) &amp;&amp; eventID % 2 === 1
}

&lt;NavLink
  to=&quot;/events/123&quot;
  isActive={oddEvent}
&gt;Event 123&lt;/NavLink&gt;
</code></pre>
<h3 id="Prompt"><a href="#Prompt" class="headerlink" title="Prompt"></a>Prompt</h3><p><em>&lt;Prompt&gt; (提示组件)</em></p>
<p>重定向到核心 API 的 <a href="https://reacttraining.com/core/api/Prompt" target="_blank" rel="external">Prompt</a></p>
<h3 id="MemoryRouter"><a href="#MemoryRouter" class="headerlink" title="MemoryRouter"></a>MemoryRouter</h3><p><em>&lt;MemoryRouter&gt; (内存路由)</em></p>
<p>将 “URL” 的历史记录保存在内存中（不读取或写入地址栏）的 <code>&lt;Router&gt;</code>。在测试和非浏览器环境（如React Native）中很有用。</p>
<pre><code class="jsx">import { MemoryRouter } from &#39;react-router&#39;

&lt;MemoryRouter&gt;
  &lt;App/&gt;
&lt;/MemoryRouter&gt;
</code></pre>
<p></p><h4 id="MemoryRouter-initialEntries-array">initialEntries: array</h4><br>历史堆栈中的一系列位置。这些可能是具有 <code>{ pathname, search, hash, state }</code> 或简单字符串 URL 的完整位置对象。<p></p>
<pre><code class="jsx">&lt;MemoryRouter
  initialEntries={[ &#39;/one&#39;, &#39;/two&#39;, { pathname: &#39;/three&#39; } ]}
  initialIndex={1}
&gt;
  &lt;App/&gt;
&lt;/MemoryRouter&gt;
</code></pre>
<p></p><h4 id="MemoryRouter-initialIndex-number">initialIndex: number</h4><br>initialEntries 数组中的初始位置索引<p></p>
<p></p><h4 id="MemoryRouter-getUserConfirmation-func">getUserConfirmation: func</h4><br>用于确认导航的功能。使用 <code>&lt;MemoryRouter&gt;</code> 直接使用 <code>&lt;Prompt&gt;</code> 时，必须使用此选项。<p></p>
<p></p><h4 id="MemoryRouter-keyLength-number">keyLength: number</h4><br>location.key 的长度（默认为6）<p></p>
<pre><code class="jsx">&lt;MemoryRouter keyLength={12}/&gt;
</code></pre>
<p></p><h4 id="MemoryRouter-children-node">children: node</h4><br>渲染简单的单个子元素<p></p>
<h3 id="Redirect"><a href="#Redirect" class="headerlink" title="Redirect"></a>Redirect</h3><p><em>&lt;Redirect&gt; (重定向组件)</em></p>
<p>渲染 <code>&lt;Redirect&gt;</code> 将导航到新的位置。新位置将覆盖历史堆栈中的当前位置，例如服务器端重定向（HTTP 3xx）</p>
<pre><code class="jsx">import { Route, Redirect } from &#39;react-router&#39;

&lt;Route exact path=&quot;/&quot; render={() =&gt; (
  loggedIn ? (
    &lt;Redirect to=&quot;/dashboard&quot;/&gt;
  ) : (
    &lt;PublicHomePage/&gt;
  )
)}/&gt;
</code></pre>
<p></p><h4 id="Redirect-to-string">to: string</h4><br>要重定向到的网址<p></p>
<pre><code class="jsx">&lt;Redirect to=&quot;/somewhere/else&quot;/&gt;
</code></pre>
<p></p><h4 id="Redirect-to-object">to: object</h4><br>重定向到的位置<p></p>
<pre><code class="jsx">&lt;Redirect to={{
  pathname: '/login',
  search: '?utm=your+face',
  state: { referrer: currentLocation }
}}/&gt;
</code></pre>
<p></p><h4 id="Redirect-push-bool">push: bool</h4><br>当为 true 时，重定向会将新条目推入历史记录，而不是替换当前条目<p></p>
<pre><code class="jsx">&lt;Redirect push to=&quot;/somewhere/else&quot;/&gt;
</code></pre>
<p></p><h4 id="Redirect-from-string">from: string</h4><br>要重定向的路径名。这只能用于在 <code>&lt;Switch&gt;</code> 中渲染 <code>&lt;Redirect&gt;</code> 时匹配位置。有关详细信息，请参阅 <code>&lt;Switch children&gt;</code> 。<p></p>
<pre><code class="jsx">&lt;Switch&gt;
  &lt;Redirect from=&#39;/old-path&#39; to=&#39;/new-path&#39;/&gt;
  &lt;Route path=&#39;/new-path&#39; component={Place}/&gt;
&lt;/Switch&gt;
</code></pre>
<h3 id="Route"><a href="#Route" class="headerlink" title="Route"></a>Route</h3><p><em>&lt;Route&gt; (路由组件)</em></p>
<p>Route 组件可能是 React Router 中了解和学习使用的<em>最重要的组件</em>。其最基本的责任是在位置与 location 的路径匹配时呈现一些 UI。</p>
<p>请参阅以下代码：</p>
<pre><code class="jsx">import { BrowserRouter as Router, Route } from &#39;react-router-dom&#39;

&lt;Router&gt;
  &lt;div&gt;
    &lt;Route exact path=&quot;/&quot; component={Home}/&gt;
    &lt;Route path=&quot;/news&quot; component={NewsFeed}/&gt;
  &lt;/div&gt;
&lt;/Router&gt;
</code></pre>
<p>如果应用程序的位置是 ‘/then’ UI 层次结构将是这样的：</p>
<pre><code class="jsx">&lt;div&gt;
  &lt;Home/&gt;
  &lt;!-- react-empty: 2 --&gt;
&lt;/div&gt;
</code></pre>
<p>如果应用程序的位置是 ‘/news’，那么 UI 层次结构将是：</p>
<pre><code class="jsx">&lt;div&gt;
  &lt;!-- react-empty: 1 --&gt;
  &lt;NewsFeed/&gt;
&lt;/div&gt;
</code></pre>
<p>“react-empty” 的注释只是 React 的 零渲染(null rendering) 的实现细节。 但为了我们的目的，这是有启发性的。 即使其渲染为空，路由总是在技术上“渲染”。 一旦应用位置与路线的路径相符，您的组件将被渲染。</p>
<p></p><h4 id="Route-render-methods">Route render methods</h4><br>有 3 种方法可以使用 <code>&lt;Route&gt;</code> 来呈现某些东西：<p></p>
<ul>
<li><a href="https://reacttraining.com/web/api/Route/component-func" target="_blank" rel="external">&lt;Route component&gt;</a></li>
<li><a href="https://reacttraining.com/web/api/Route/render-func" target="_blank" rel="external">&lt;Route render&gt;</a></li>
<li><a href="https://reacttraining.com/web/api/Route/children-func" target="_blank" rel="external">&lt;Route children&gt;</a></li>
</ul>
<p>每个在不同的情况下都是有用的。您只能在给定的 <code>&lt;Route&gt;</code> 上使用其一。请参阅下面的解释了解为什么您有 3 个选项。大多数时候你会使用组件。</p>
<p></p><h4 id="Route-props">Route props</h4><br>所有三种渲染方法都将通过相同的三个路由参数<p></p>
<ul>
<li><a href="https://reacttraining.com/web/api/match" target="_blank" rel="external">match</a></li>
<li><a href="https://reacttraining.com/web/api/location" target="_blank" rel="external">location</a></li>
<li><a href="https://reacttraining.com/web/api/history" target="_blank" rel="external">history</a></li>
</ul>
<p></p><h4 id="Route-component">component</h4><br>仅当位置匹配时才呈现的 React 组件<p></p>
<pre><code class="jsx">&lt;Route path=&quot;/user/:username&quot; component={User}/&gt;

const User = ({ match }) =&gt; {
  return &lt;h1&gt;Hello {match.params.username}!&lt;/h1&gt;
}
</code></pre>
<p>当您使用组件（而不是下面的渲染）时，路由器使用 React.createElement 从给定组件创建一个新的 React 元素。<br>这意味着如果您提供内联函数，那么您将在每个渲染中创建一个新组件。 这将导致现有组件卸载和新组件安装，而不是仅更新现有组件。 对于内联渲染，请使用渲染参数（下面）。</p>
<p></p><h4 id="Route-render-func">render: func</h4><br>这允许方便的在线渲染和包装，接收一个函数直接返回 JSX（不要和 component 同时使用）<p></p>
<p>您可以使用组件支持为您创建一个新的 React element，而不必在位置匹配时传入要调用的函数。渲染参数接收与构建渲染参数相同的所有路径参数。</p>
<pre><code class="jsx">/*
convenient inline rendering
方便内联渲染
*/
&lt;Route path=&quot;/home&quot; render={() =&gt; &lt;div&gt;Home&lt;/div&gt;}/&gt;

// wrapping/composing
const FadingRoute = ({ component: Component, ...rest }) =&gt; (
  &lt;Route {...rest} render={props =&gt; (
    &lt;FadeIn&gt;
      &lt;Component {...props}/&gt;
    &lt;/FadeIn&gt;
  )}/&gt;
)

&lt;FadingRoute path=&quot;/cool&quot; component={Something}/&gt;
</code></pre>
<p>警告：<code>&lt;Route component&gt;</code> 取决于 <code>&lt;Route render&gt;</code>，所以不要在同一个 <code>&lt;Route&gt;</code> 中使用两者。</p>
<p>children: func<br>根据是否有匹配来渲染</p>
<p>有时您需要渲染路径是否匹配该位置。在这些情况下，您可以使用函数子参数。它的工作原理就像渲染，除了它被调用检查是否有匹配。</p>
<p>子渲染参数接收与组件和渲染方法相同的 route 参数，除非路由未能匹配 URL，则 match 为 null。这允许您根据 route 是否匹配来动态调整您的UI。在这里，如果 route 匹配，我们添加一个活动类。</p>
<pre><code class="jsx">&lt;ul&gt;
  &lt;ListItemLink to=&quot;/somewhere&quot;/&gt;
  &lt;ListItemLink to=&quot;/somewhere-else&quot;/&gt;
&lt;/ul&gt;

const ListItemLink = ({ to, ...rest }) =&gt; (
  &lt;Route path={to} children={({ match }) =&gt; (
    &lt;li className={match ? &#39;active&#39; : &#39;&#39;}&gt;
      &lt;Link to={to} {...rest}/&gt;
    &lt;/li&gt;
  )}/&gt;
)
</code></pre>
<p>这也可以用于动画：</p>
<pre><code class="jsx">&lt;Route children={({ match, ...rest }) =&gt; (
  {/*
    Animate will always render, so you can use lifecycles to animate its child in and out
    动画将始终渲染，所以您可以使用生命周期来使其 子元素 进出动画
  */}
  &lt;Animate&gt;
    {match &amp;&amp; &lt;Something {...rest}/&gt;}
  &lt;/Animate&gt;
)}/&gt;
</code></pre>
<p>警告：<code>&lt;Route component&gt;</code> 和 <code>&lt;Route render&gt;</code> 都会超过 <code>&lt;Route children&gt;</code>，所以不要在同一个 <code>&lt;Route&gt;</code> 中使用多个。</p>
<p></p><h4 id="Route-path-string">path: string</h4><br>有效的路径，指定路由的匹配规则。这个属性是可以省略的，这样的话，不管路径是否匹配，总是会加载指定组件。<p></p>
<pre><code class="jsx">&lt;Route path=&quot;/users/:id&quot; component={User}/&gt;
</code></pre>
<p>没有 path 的 Route 总是匹配。</p>
<p></p><h4 id="Route-exact-bool">exact: bool</h4><br>当为 true 时，只有路径匹配 location.pathname 才匹配。<p></p>
<pre><code class="jsx">&lt;Route exact path=&quot;/one&quot; component={About}/&gt;
</code></pre>
<table>
<thead>
<tr>
<th>path</th>
<th>location.pathname</th>
<th>exact</th>
<th>matches</th>
</tr>
</thead>
<tbody>
<tr>
<td>/one</td>
<td>/one/two</td>
<td>true</td>
<td>no</td>
</tr>
<tr>
<td>/one</td>
<td>/one/two</td>
<td>false</td>
<td>yes</td>
</tr>
</tbody>
</table>
<p></p><h4 id="Route-strict-bool">strict: bool</h4><br>当为 true 时，具有尾部斜杠的路径将仅与具有尾部斜杠的 location.pathname 匹配。当 location.pathname 中有其他URL段时，这不起作用。<p></p>
<pre><code class="jsx">&lt;Route strict path=&quot;/one/&quot; component={About}/&gt;
</code></pre>
<table>
<thead>
<tr>
<th>path</th>
<th>location.pathname</th>
<th>matches</th>
</tr>
</thead>
<tbody>
<tr>
<td>/one/</td>
<td>/one</td>
<td>no</td>
</tr>
<tr>
<td>/one/</td>
<td>/one/</td>
<td>yes</td>
</tr>
<tr>
<td>/one/</td>
<td>/one/two</td>
<td>yes</td>
</tr>
</tbody>
</table>
<p>警告：strict 可以用来强制一个 location.pathname 没有尾部斜杠，但为了做到这一点，exact 和 matches 必须是 true。</p>
<pre><code class="jsx">&lt;Route exact strict path=&quot;/one&quot; component={About}/&gt;
</code></pre>
<table>
<thead>
<tr>
<th>path</th>
<th>location.pathname</th>
<th>matches</th>
</tr>
</thead>
<tbody>
<tr>
<td>/one</td>
<td>/one</td>
<td>yes</td>
</tr>
<tr>
<td>/one</td>
<td>/one/</td>
<td>no</td>
</tr>
<tr>
<td>/one</td>
<td>/one/two</td>
<td>no</td>
</tr>
</tbody>
</table>
<h3 id="Router"><a href="#Router" class="headerlink" title="Router"></a>Router</h3><p><em>&lt;Router&gt; (路由器组件)</em></p>
<p>所有路由器组件的常见低级接口。通常，应用程序将使用其中一个高级路由器：</p>
<ul>
<li><a href="#BrowserRouter">&lt;BrowserRouter&gt;</a></li>
<li><a href="#HashRouter">&lt;HashRouter&gt;</a></li>
<li><a href="#MemoryRouter">&lt;MemoryRouter&gt;</a></li>
<li><a href="#NativeRouter">&lt;NativeRouter&gt;</a></li>
<li><a href="#StaticRouter">&lt;StaticRouter&gt;</a></li>
</ul>
<p>使用低级 <code>&lt;Router&gt;</code> 的最常见用例，是将自定义历史记录与状态管理库（如 Redux 或 Mobx）进行同步。请注意，这不是与 React Router 一起使用状态管理库，这只适用于深度集成。</p>
<pre><code class="jsx">import { Router } from &#39;react-router&#39;
import createBrowserHistory from &#39;history/createBrowserHistory&#39;

const history = createBrowserHistory()

&lt;Router history={history}&gt;
  &lt;App/&gt;
&lt;/Router&gt;
</code></pre>
<p></p><h4 id="Router-history-object">history: object</h4><br>用于导航的历史(<a href="https://github.com/ReactTraining/history" target="_blank" rel="external">history</a>)对象<p></p>
<pre><code class="jsx">import createBrowserHistory from &#39;history/createBrowserHistory&#39;

const customHistory = createBrowserHistory()
&lt;Router history={customHistory}/&gt;
</code></pre>
<p></p><h4 id="Router-children-node">children: node</h4><br>渲染简单的单个子元素<p></p>
<pre><code class="jsx">&lt;Router&gt;
  &lt;App/&gt;
&lt;/Router&gt;
</code></pre>
<h3 id="StaticRouter"><a href="#StaticRouter" class="headerlink" title="StaticRouter"></a>StaticRouter</h3><p><em>&lt;StaticRouter&gt; (静态路由组件)</em></p>
<p>一个从不改变位置的 <code>&lt;Router&gt;</code>，区别相对于动态路由。</p>
<p>当用户实际上没有点击时，这在服务器端渲染场景中很有用，因此该位置从未实际更改。 因此，名称：static。 当您只需要插入一个位置并在渲染输出上作出断言时，它也可用于简单的测试。</p>
<p>以下是一个示例节点服务器，为 <code>&lt;Redirect&gt;</code> 发送 HTTP 302 状态代码（Temporarily Moved 暂时性转移重定向），并为其他请求发送常规 HTML。</p>
<pre><code class="jsx">import { createServer } from &#39;http&#39;
import React from &#39;react&#39;
import ReactDOMServer from &#39;react-dom/server&#39;
import { StaticRouter } from &#39;react-router&#39;

createServer((req, res) =&gt; {

  /*
  This context object contains the results of the render
  此上下文对象包含渲染的结果
  */
  const context = {}

  const html = ReactDOMServer.renderToString(
    &lt;StaticRouter location={req.url} context={context}&gt;
      &lt;App/&gt;
    &lt;/StaticRouter&gt;
  )

  /*
  context.url will contain the URL to redirect to if a &lt;Redirect&gt; was used
  如果使用了 &lt;Redirect&gt;，则 context.url 将包含要重定向到的 URL
  */
  if (context.url) {
    res.writeHead(302, {
      Location: context.url
    })
    res.end()
  } else {
    res.write(html)
    res.end()
  }
}).listen(3000)
</code></pre>
<p></p><h4 id="StaticRouter-basename-string">basename: string</h4><br>所有位置的基本 URL。正确格式化的基本名称应该有一个主要的斜杠，但没有尾部斜杠<p></p>
<pre><code class="jsx">&lt;StaticRouter basename=&quot;/calendar&quot;&gt;
  &lt;Link to=&quot;/today&quot;/&gt; // 渲染成 &lt;a href=&quot;/calendar/today&quot;&gt;
&lt;/StaticRouter&gt;
</code></pre>
<p></p><h4 id="StaticRouter-location-string">location: string</h4><br>服务器接收到的URL，可能在 node 服务上 req.url。<p></p>
<pre><code class="jsx">&lt;StaticRouter location={req.url}&gt;
  &lt;App/&gt;
&lt;/StaticRouter&gt;
</code></pre>
<p></p><h4 id="StaticRouter-location-object">location: object</h4><br>形成一个 location 对象，像 { pathname, search, hash, state }<p></p>
<pre><code class="jsx">&lt;StaticRouter location={{ pathname: '/bubblegum' }}&gt;
  &lt;App/&gt;
&lt;/StaticRouter&gt;
</code></pre>
<p></p><h4 id="StaticRouter-context-object">context: object</h4><br>一个简单的 JavaScript 对象。在渲染过程中，组件可以添加对象的属性来存储有关渲染的信息。<p></p>
<pre><code class="jsx">const context = {}
&lt;StaticRouter context={context}&gt;
  &lt;App /&gt;
&lt;/StaticRouter&gt;
</code></pre>
<p>当 <code>&lt;Route&gt;</code> 匹配时，它会将 context 对象传递给它作为 staticContext 参数呈现的组件。查看 服务器渲染指南-英文(<a href="https://reacttraining.com/web/guides/server-rendering" target="_blank" rel="external">Server Rendering guide</a>)，了解有关如何自行执行此操作的更多信息。</p>
<p>渲染后，这些属性可用于配置服务器的响应。</p>
<pre><code class="jsx">if(context.status === &#39;404&#39;) {
  // ...
}
</code></pre>
<p></p><h4 id="StaticRouter-children-node">children: node</h4><br>渲染简单的单个子元素<p></p>
<h3 id="Switch"><a href="#Switch" class="headerlink" title="Switch"></a>Switch</h3><p><em>&lt;Switch&gt; (单匹配组件)</em></p>
<p>渲染与位置匹配的第一个子标签，<code>&lt;Route&gt;</code> 或 <code>&lt;Redirect&gt;</code> . 比起 Route’s 他是独特的，只会渲染第一个匹配。</p>
<p>这不同于仅仅使用一堆 <code>&lt;Route&gt;</code>？</p>
<p><code>&lt;Switch&gt;</code> 是独特的，因为它仅仅渲染一个路由。相反，与位置匹配的每个 <code>&lt;Route&gt;</code> 都会包含渲染。参考这个代码：</p>
<pre><code class="jsx">&lt;Route path=&quot;/about&quot; component={About}/&gt;
&lt;Route path=&quot;/:user&quot; component={User}/&gt;
&lt;Route component={NoMatch}/&gt;
</code></pre>
<p>如果 URL 是 ‘/about’，那么 <code>&lt;About&gt;</code>、<code>&lt;User&gt;</code> 和 <code>&lt;NoMatch&gt;</code> 将全部渲染，因为它们都与路径匹配。这是通过设计，允许我们以许多方式将 <code>&lt;Route&gt;</code> 组合到我们的应用程序中，如侧边栏和面包屑，引导选项卡等。</p>
<p>但是，偶尔，我们只想选择一个 <code>&lt;Route&gt;</code> 来渲染。如果我们在 ‘/about’ 不希望也匹配 ‘/:user’（或显示我们的”404页面”）。以下是使用 Switch 的方法：</p>
<pre><code class="jsx">import { Switch, Route } from &#39;react-router&#39;

&lt;Switch&gt;
  &lt;Route exact path=&quot;/&quot; component={Home}/&gt;
  &lt;Route path=&quot;/about&quot; component={About}/&gt;
  &lt;Route path=&quot;/:user&quot; component={User}/&gt;
  &lt;Route component={NoMatch}/&gt;
&lt;/Switch&gt;
</code></pre>
<p>现在，如果我们在 ‘/about’，<code>&lt;Switch&gt;</code> 将开始寻找匹配的 <code>&lt;Route&gt;</code>。 <code>&lt;Route path=&quot;/about&quot; /&gt;</code> 将匹配，<code>&lt;Switch&gt;</code> 将停止寻找匹配并呈现 <code>&lt;About&gt;</code>。同样，如果我们在 ‘/michael’，那么 <code>&lt;User&gt;</code> 将呈现。</p>
<p>这对于 动画转换(animated transitions) 也是有用的，因为匹配的 <code>&lt;Route&gt;</code> 被渲染在与前一个相同的位置。</p>
<pre><code class="jsx">&lt;Fade&gt;
  &lt;Switch&gt;
    {/*
    there will only ever be one child here
    这里只会有一个孩子
    */}
    &lt;Route/&gt;
    &lt;Route/&gt;
  &lt;/Switch&gt;
&lt;/Fade&gt;

&lt;Fade&gt;
  &lt;Route/&gt;
  &lt;Route/&gt;
  {/*
  there will always be two children here, one might render null though, making transitions a bit more cumbersome to work out
  这里有两个孩子，一个可能渲染为 null，从而使转换更加麻烦
  */}
&lt;/Fade&gt;
</code></pre>
<p></p><h4 id="Switch-children-node">children: node</h4><br><code>&lt;Switch&gt;</code> 的所有子项应为 <code>&lt;Route&gt;</code> 或 <code>&lt;Redirect&gt;</code> 元素。只有匹配当前位置的第一个子标签才会渲染。<p></p>
<p><code>&lt;Route&gt;</code> 元素使用它们的路径匹配匹配，并且 <code>&lt;Redirect&gt;</code> 元素使用它们与参数相匹配。没有路径的路由或路由不正确的 <code>&lt;Redirect&gt;</code> 将始终与当前位置匹配。</p>
<p>当您在 <code>&lt;Switch&gt;</code> 中包含 <code>&lt;Redirect&gt;</code> 时，可以使用任何 <code>&lt;Route&gt;</code> 的位置匹配参数：path，exact 和 strict。从只是 路径参数 的别名。</p>
<pre><code class="jsx">&lt;Switch&gt;
  &lt;Route exact path=&quot;/&quot; component={Home}/&gt;

  &lt;Route path=&quot;/users&quot; component={Users}/&gt;
  &lt;Redirect from=&quot;/accounts&quot; to=&quot;/users&quot;/&gt;

  &lt;Route component={NoMatch}/&gt;
&lt;/Switch&gt;
</code></pre>
<h3 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h3><ul>
<li><a href="https://reacttraining.com/react-router/web/api/" target="_blank" rel="external">React Router: Declarative Routing for React.js</a></li>
</ul>

  
  </div>

  
    
<nav class="article-nav">
  
    <a href="/2017/05/10/yeoman-genertors-create/" title="使用 Yeoman Generators 制作自己的脚手架" class="newer">
      <em>使用 Yeoman Generators 制作自己的脚手架</em>
    </a>
  
  
    <a href="/2017/03/27/webpack2-react-css/" title="Webpack2 上配置 React，CSS 外置方案" class="older">
      <em>Webpack2 上配置 React，CSS 外置方案</em>
    </a>
  
</nav>


  

  
  <div class="donate-qrcode">
    <h3>如果您觉得内容对您的学习有所帮助，您可以请我喝咖啡~ （不喝无名的咖啡，请告诉我你是谁）</h3>
    <ul>
      <li><img src="/images/weixin-pay.jpg" alt="微信支付二维码" class="weixin-pay"></li>
      <li><img src="/images/ali-pay.jpg" alt="支付宝支付二维码" class="ali-pay"></li>
    </ul>
    <p>（手机微信下可以长按左图二维码，选择“识别二维码”输入金额）</p>
  </div>
  <!-- /.donate-qrcode -->
  

  

  

</article>

  </div>
  <!-- /.container -->

  <div class="sidebar">
  <header>
  <a href="/" class="mylogo">
    
      <img src="/images/edlad-web-logo-512.png" alt="ED少年" title="ED少年">
      <img src="/images/edlad-web-logo-min.png" alt="ED少年" title="ED少年">
    
  </a>
  
  <h2>记录从学习前端开发到放弃的整个康复过程</h2>
  
</header>

  <nav class="navigation" id="navigation">
    
      <a title="首页" href="/">
        <svg class="icon"><use xlink:href="#icon-hospital"></use></svg><em>首页</em>
      </a>
    
      <a title="编码" href="/categories/code/">
        <svg class="icon"><use xlink:href="#icon-bug"></use></svg><em>编码</em>
      </a>
    
      <a title="生活" href="/categories/life/">
        <svg class="icon"><use xlink:href="#icon-costumes"></use></svg><em>生活</em>
      </a>
    
      <a title="作者" href="/author/">
        <svg class="icon"><use xlink:href="#icon-skull"></use></svg><em>作者</em>
      </a>
    
      <a title="友链" href="/friend/">
        <svg class="icon"><use xlink:href="#icon-nature"></use></svg><em>友链</em>
      </a>
    
  </nav>
  <nav class="mobile-navigation" id="mobile-navigation">
    <button><span>Menu</span></button>
    <!--
    <select>
      
      <option value="/">首页</option>
      
      <option value="/categories/code/">编码</option>
      
      <option value="/categories/life/">生活</option>
      
      <option value="/author/">作者</option>
      
      <option value="/friend/">友链</option>
      
    </select>
    -->
  </nav>
  <footer>
  <p>
    <a href="/atom.xml" target="_blank">
      <svg class="icon"><use xlink:href="#icon-doctors"></use></svg><em>RSS订阅</em>
    </a>
    |
    <a href="/sitemap.xml" target="_blank">
      <svg class="icon"><use xlink:href="#icon-shoes"></use></svg><em>网站地图</em>
    </a>
  </p>
  <p>Proudly powered by <a href="http://hexo.io/" target="_blank">Hexo</a></p>
  <p>Designed by <a href="">Eded Wang</a></p>
  <p>Copyright&copy; 2017 <a href="">ED少年</a></p>
  
  <p>闽ICP备16010082号</p>
  
</footer>

</div>
<!-- /.navigation -->

  <div id="retop" class="retop">
  <svg class="icon"><use xlink:href="#icon-rocket"></use></svg>
</div>


  <div class="mobile-nav" id="mobile-nav">
    <ul>
      
      <li>
        <a href="/">
          <svg class="icon"><use xlink:href="#icon-hospital"></use></svg>
          <em>首页</em>
        </a>
      </li>
      
      <li>
        <a href="/categories/code/">
          <svg class="icon"><use xlink:href="#icon-bug"></use></svg>
          <em>编码</em>
        </a>
      </li>
      
      <li>
        <a href="/categories/life/">
          <svg class="icon"><use xlink:href="#icon-costumes"></use></svg>
          <em>生活</em>
        </a>
      </li>
      
      <li>
        <a href="/author/">
          <svg class="icon"><use xlink:href="#icon-skull"></use></svg>
          <em>作者</em>
        </a>
      </li>
      
      <li>
        <a href="/friend/">
          <svg class="icon"><use xlink:href="#icon-nature"></use></svg>
          <em>友链</em>
        </a>
      </li>
      
    </ul>
  </div>
  <!-- /.mobile-nav -->
  <div class="shade" id="shade"></div>
  <!-- /.shade -->

  

  
    <script>
    (function(){
        if( location.hostname == "localhost" ) { return; }

        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        bp.src = curProtocol === 'https'
          ? 'https://zz.bdstatic.com/linksubmit/push.js'
          : 'http://push.zhanzhang.baidu.com/push.js';
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
    </script>
  

  <script src="/js/instantclick.min.js" data-no-instant></script>
  <script src="/js/jquery.min.js"></script>
  <script src="/js/prism.js"></script>
  <script src="/js/main.js" data-no-instant></script>

  
    <script src="//s4.cnzz.com/z_stat.php?id=1259789287&web_id=1259789287" data-no-instant></script>
  
  

</body>
</html>
